<template>
  <div class="table-wrapped">
    <div class="table-top">
      <div class="table-content">
        <el-table :data="tableData" style="width: 100%;" border>
          <el-table-column type="index" width="50" />
          <el-table-column label="消息主题" prop="message_title" />
          <el-table-column label="消息类别" prop="message_category" />
          <el-table-column label="发布部门" prop="message_publish_department" />
          <el-table-column label="接收对象" prop="message_receipt_object" />
          <el-table-column label="删除日期" prop="message_delete_time">
            <template #default="{row}">
              <div>{{row.message_delete_time?.slice(0,10)}}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" fixed="right">
            <template #default="{row}">
              <div>
                <el-popconfirm title="确定还原?" @confirm="renew(row)">
                  <template #reference>
                    <el-button type="success">还原</el-button>
                  </template>
                </el-popconfirm>
                <el-popconfirm title="确定删除?" @confirm="realDelete(row)">
                  <template #reference>
                    <el-button type="danger" >删除</el-button>
                  </template>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="table-footer">
      <el-pagination :page-size="1" :current-page="paginationData.recycleCurrentPage" :pager-count="7"
        :total="paginationData.recycleTotal" :page-count="paginationData.recyclePageCount"
        @current-change="recycleCurrentChange" layout="prev, pager, next" />
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import {recycleList,recover,deleteMessage} from '@/api/message/index'
import {changeUserReadListButDelete,changeUserReadList} from '@/api/dep_msg/index'
import {useMsg} from '@/store/modules/message'
const msgStore = useMsg()
const tableData = ref([])

onMounted(()=>{
  getData()
})

const getData = async()=>{
  const res = await recycleList()
  if(res.status == 0){
    tableData.value = res.data
  }
}
//还原
const renew = async(row:any)=>{
  const res = await recover(row.id)
  if(res.status == 0){
     let data:any  = {
            deleteId:row.id,
            department:row.message_publish_department
        }
      await changeUserReadList(data)
     msgStore.returnReadList(localStorage.getItem('id'))
    getData()
  }
}

//删除
const realDelete = async(row:any)=>{
  const res = await deleteMessage(row.id)
  if(res.status == 0){
     msgStore.returnReadList(localStorage.getItem('id'))
    getData()
  }
}
const paginationData  = reactive({
  recycleCurrentPage:1,
  recycleTotal:0,
  recyclePageCount:5,
})

const recycleCurrentChange = ()=>{}
</script>

<style lang="scss" scoped>
	.table-wrapped {
		padding: 8px;
		height: calc(100vh - 101px);
		background: #f5f5f5;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.table-top {
			display: flex;
			flex-direction: column;

			.table-content {
				padding: 10px 20px 20px;
				margin-bottom: 8px;
				background: #fff;
			}
		}

		.table-footer {
			display: flex;
			justify-content: flex-end;
			background: #fff;
		}
	}
	
	:deep(.el-table .cell) {
		font-weight: 400;
	}
	
</style>